<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="balance-container">
    <div class="balance-title">
      <van-icon class="title-icon" name="arrow-left" @click="$router.back()" />
      我的余额
      <div class="balance-box">
        <div class="balance-box2">
          <text class="text1">当前余额</text>
          <div>
            <van-icon class="box-icon" name="question" />
            <text class="text2">余额说明</text>
          </div>
        </div>
        <div class="balance-box3">
          <text class="text3">0.00</text>
          <text class="text4">元</text>
        </div>
        <van-button class="balancebtn" color="#a9a9a9">提现</van-button>
      </div>
    </div>
    <div class="text5">交易明细</div>
    <div class="balance-box4">
      <img src="../../assets/images/yebjt.png" class="img" />
      <text class="text6">暂无明细记录</text>
    </div>
  </div>
</template>

<script>
export default {

}
</script>
<style scoped>
</style>
<style scoped  lang="less">
.balance-container {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  background: #f5f5f5;

  .balance-title{
    background-color: #0a92e7;
    font-size: 0.5314rem;
    color: #fff;
    height: 4.8309rem;
    line-height: 1.087rem;
    text-align: center;
    position: relative;
    .title-icon {
      position: absolute;
      top: 0.2657rem;
      left: 0.0966rem;
    }
    .balance-box {
      width: 96%;
      height: 3.5507rem;
      display: flex;
      flex-direction: column;
      border-radius: 0  .1208rem;
      background-color: #fff;
      margin-left: 0.1932rem;
      .balance-box2 {
        color: #646464;
        display: flex;
        height: 0.7246rem;
        line-height: 0.7246rem;
        justify-content: space-around;
        font-size: 0.3382rem;
        .box-icon {
          padding-left: 5.4348rem;
          color: #0a92e7;
        }
        .text2 {
          padding-left: 0.1208rem;
          color: #0a92e7;
        }
      }
    }
  }
  .balance-box3 {
        width: 96%;
        margin-left: 0.1932rem;
        display: block;
        .text3 {
          font-size: 0.9662rem;
          color: #181818;
        }
        .text4 {
          align-items: flex-end;
          padding-left: 0.1691rem;
          color: #181818;
          margin-right: 6.6667rem;
          font-size: 0.4831rem;
        }
      }
  .balancebtn {
    width: 9.1787rem;
    margin-left: 0.2174rem;
    margin-top: 0.2415rem;
  }
  .text5 {
    color: #7b7b7b;
    font-size: 0.3382rem;
    margin-top: 0.2415rem;
    margin-left: 0.2415rem;
  }
  .balance-box4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img {
      width: 2.4155rem;
      padding-top: 1.57rem;
    }
    .text6 {
      color: #656565;
      padding-top: 0.3623rem;
      font-size: 0.4348rem;
    }
  }
}
</style>
